<template>
    <div class="form_table">
        <el-form :model="projectModel" ref="projectForm" label-width="120px">
            <el-form-item label="项目名称" prop="name" :rules="[{ required: true, message: '请输入项目名称', trigger: 'blur' }]">
                <el-input v-model="projectModel.name" placeholder="请输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="项目类型" prop="category" :rules="[{ required: true, message: '请选择项目类型', trigger: 'change' }]">
                <el-select v-model="projectModel.category" placeholder="请选择项目类型">
                    <el-option label="科研项目" value="科研项目"></el-option>
                    <el-option label="开发项目" value="开发项目"></el-option>
                    <el-option label="系统集成" value="系统集成"></el-option>
                    <!-- 添加更多类型选项 -->
                </el-select>
            </el-form-item>
            <el-form-item label="项目描述" prop="description">
                <el-input type="textarea" :rows="4" placeholder="请输入项目描述" v-model="projectModel.description"
                    maxlength="1024" show-word-limit></el-input>
            </el-form-item>
            <el-form-item>
                <div class="controls">
                    <el-button v-if="currentStep > 1" @click="prevStep">上一步</el-button>
                    <el-button type="primary" @click="nextStep">下一步</el-button>
                    <el-button @click="resetForm">取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus';

//定义对外属性接收步骤变量
const { currentStep } = defineProps({
    currentStep: {
        type: Number,
        required: true
    }
});

// 定义表单引用
const projectForm = ref(null);
// 定义对象
let projectModel = ref({
    id:18,
    name: '',
    category: '',
    description: '',
    img_url:require("@/assets/img/template-project-item1.png"),
});

//定于下一步控制父组件事件
const emitNextStep = defineEmits(['prevStep', 'nextStep']);

function nextStep() {
    projectForm.value.validate((valid) => {
        if (valid) {
            // 处理提交逻辑
            if (currentStep < 3) {
                emitNextStep('nextStep', currentStep + 1, projectModel.value)
            }
        } else {
            return false;
        }
    });

}

function prevStep() {
    if (currentStep > 1) {
        emitNextStep('prevStep', currentStep - 1)
    }
}

// 提交表单
const submitForm = () => {
    projectForm.value.validate((valid) => {
        if (valid) {
            // 处理提交逻辑
            console.log('提交成功', projectModel.value);
            ElMessage.success('提交成功');
        } else {
            console.log('表单校验失败');
            ElMessage.error('表单校验失败');
            return false;
        }
    });
};

// 重置表单
const resetForm = () => {
    projectForm.value.resetFields();
};
</script>

<style lang="scss" scoped>
.form_table {
    width: 100%;
    min-width: 700px; // 设置最大宽度为700px
    margin: 20px auto;
    box-sizing: border-box; // 确保padding和border包含在宽度内

    .el-form {
        width: 100%; // 使表单宽度100%

        .el-form-item {
            width: 100%; // 使表单项宽度100%

            .el-form-item__content {
                width: auto; // 使输入框宽度自动
                max-width: 100%; // 确保输入框最大宽度不超过表单项宽度

                .el-input,
                .el-textarea {
                    width: 100%; // 使输入框和选择框宽度100%
                }

                .el-select {
                    min-width: 120px;
                    max-width: 240px;
                }
            }
        }
    }

    //步骤操作
    .controls {
        margin: 50px 0 20px 0;
        display: flex;
        width: 100%;
        justify-content: flex-end;
    }
}
</style>
